<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Vite + Vue + TS</title>
    <script>
      // 字体根大小设置（屏幕宽度最大限制480px），用于rem单位
      var htmlDom = document.documentElement;
      var windowWidth = window.innerWidth || htmlDom.clientWidth;
      var proportion = 7.5;
      if (windowWidth >= 480) {
        windowWidth = 480;
      } else {
        proportion = 7.5;
      }
      var evt =
        "onorientationchange" in window ? "orientationchange" : "resize";
      htmlDom.style.fontSize = windowWidth / proportion + "px";

      (function () {
        document.addEventListener(
          "DOMContentLoaded",
          function () {
            if (!htmlDom.style.fontSize) {
              var htmlDomProtect = document.documentElement;
              var windowWidth = htmlDomProtect.clientWidth;
              if (windowWidth >= 480) {
                windowWidth = 480;
              } else {
                proportion = 7.5;
              }
              htmlDomProtect.style.fontSize = windowWidth / proportion + "px";
            }
          },
          false
        );
      })();

      window.addEventListener(
        evt,
        function () {
          setTimeout(function () {
            var htmlDomProtect = document.documentElement;
            var windowWidth = htmlDomProtect.clientWidth;
            if (windowWidth >= 480) {
              windowWidth = 480;
            } else {
              proportion = 7.5;
            }
            htmlDomProtect.style.fontSize = windowWidth / proportion + "px";
          }, 200);
        },
        false
      );
    </script>
  </head>
  <body>
    <div id="app"></div>
    <div id="modal"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
